<template>
    <div class='slot-roles-info-table'>
        <el-table :data="rolesData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border
                  class="user-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="30"></el-table-column>
            <el-table-column prop="role_name" label="角色名称" sortable min-width="180"></el-table-column>
            <el-table-column prop="role_code" label="角色编码" sortable min-width="180"></el-table-column>
            <el-table-column prop="role_desc" label="角色描述" sortable min-width="300"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="right" min-width="70">
                <template slot-scope="scope">
                    <el-button @click="updateRoles(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper" :total="rolesData.length"></el-pagination>

        <!-- 角色编辑  -->
        <el-dialog title="编辑" :visible.sync="isDialog" width="900px" top="50px" :close-on-click-modal="false">
            <el-tree :data="tableTreeData" ref="rolesTree" show-checkbox node-key="id"
                     :default-expand-all="showTree"
                     :default-expanded-keys="openTreeNode"
                     :style="dialogTreeHeight"
                     :props="defaultProps">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span :class="!data.edit ? 'tree-name-color' : ''" style="font-size: 15px;font-weight: bold;">{{ node.label }}</span>
                </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialogList">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        data() {
            let tokenId = sessionStorage.getItem("tokenId");
            return {
                tokenId: tokenId,
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 130,

                rolesData: [],
                isDialog: false,
                showTree:false,
                openTreeNode:[],
                roleId: '',
                tableTreeData: [],
                dialogTreeHeight: {
                    height: (document.documentElement.clientHeight - 210) + 'px',
                    overflowY: 'auto'
                },

                defaultProps: {
                    children: 'children',
                    label: 'name',
                    id: 'id'
                }

            }
        },
        created() {
            this.getRolesData();
            this.getTreeData();
        },
        methods: {
            getRolesData() {
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");
                this.$http({
                    url: '/api/adscm/system/role/getAllRoles?tokenId=' + _token,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.rolesData = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            getTreeData() {
                let _this = this;
                let _token = sessionStorage.getItem("tokenId");
                this.$http({
                    url: '/api/adscm/system/menu/getAllMenu?tokenId=' + _token,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.tableTreeData = res.data.content.children;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            updateRoles(row) {
                let _this = this;

                _this.isDialog = true;
                _this.showTree = false;

                _this.roleId = row.id;
                _this.openTreeNode = [];
                this.$http({
                    url: '/api/adscm/system/menu/getRolesSrc/' + _this.roleId + '?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {


                    console.log( res.data )
                    if (res.data.statusCode == 200) {
                        let content = res.data.content;
                        let data = [];
                        for(let i = 0;i<content.length;i++){
                            data.push(content[i].id);
                        }
                        _this.$refs.rolesTree.setCheckedKeys(data);
                        _this.openTreeNode = data;
                    } else {
                        _this.$message.error(res.data.desc);

                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");

                })
            },
            submitDialogList() {
                let _this = this;
                let rolesTree = this.$refs.rolesTree;
                let arr = rolesTree.getHalfCheckedKeys().concat(rolesTree.getCheckedKeys());
                let menuIds = arr.join(',');
                let params = new URLSearchParams();
                params.append("menuIds", menuIds);
                this.$http({
                    url: '/api/adscm/system/role/rolesMenus/' + _this.roleId + '?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data: params
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog = false;
                        _this.getRolesData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            timestampToTime(timestamp) {
                let date = new Date(timestamp);
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                let s = (date.getMilliseconds() < 10 ? '0' + date.getMilliseconds() : date.getMilliseconds());
                return Y + M + D + h + m + s;
            },
            formatTimestampToTime(row, column, cellValue, index) {
                return cellValue ? this.timestampToTime(cellValue) : '';
            },
            handleSizeChange(size) {
                this.pagesize = size;
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
            },

        }
    }
</script>

<style scope>
    @import "index.css";
</style>
